import { $getProductList } from "@/apis/product/product";
import { $allocationProduct, $allocationProductRecord } from "@/apis/question/question";
import Popup from "@/components/Popup/Popup";
import { message } from "ant-design-vue";
import to from "await-to-js";
import { computed, defineComponent, reactive, ref } from "vue";
import styles from "./Allocation.module.less";


export default defineComponent({
  props: {
    service: {
      type: Object,
    }
  },
  setup(props, { expose, emit }) {
    const allocationRef = ref(null as any);
    const allocationing = ref(false);
    const state = reactive({
      form: {
        id: '',
      },
      columns: [
        {
          title: "序号",
          dataIndex: "sort",
          align: "center",
          width: "70px",
        },
        {
          title: "产品名称",
          dataIndex: "chineseName",
          align: "left",
          width: "130px",
        },
      ],
      dataSource: [],
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
        showTotal: (total) => `共${total}条`
      },
      loading: false,
      selectedRowKeys: [],
    } as any)

    //获取列表
    const getList = async () => {
      const [err, res]: any = await to($getProductList({ pageNum: state.pagination.current, pageSize: state.pagination.pageSize }))
      if (!err) {
        state.dataSource = res?.data?.rows || [];
        state.pagination.total = res?.data?.total || 0;
      }
    }
    
    //获取问题分配产品记录
    const getRecord = async () => {
      const [err, res]: any = await to($allocationProductRecord({ questionId: state.form.id }));
      if (!err) {
        state.selectedRowKeys = res.data?.data.map(x => x.productId) || [];
      }
    }

    //表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
      getList();
    }

    //选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };

    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      }
    })

    //确定
    const submit = async () => {
      allocationing.value = true;
      const [err, res]: any = await to($allocationProduct({
        questionId: state.form.id,
        productIds: state.selectedRowKeys,
      }))
      if (!err) {
        message.success('操作成功');
        allocationRef.value.close()
      }
      allocationing.value = false;
    }

    const open = async ({ id }) => {
      state.form.id = id;
      await getList();
      getRecord();
      allocationRef.value.open();
    }

    expose({
      open
    })

    return () => (
      <Popup
        ref={allocationRef}
        title="分配产品"
        width="700px"
        oriState={state}
      >
        <div class={styles.container}>
          <a-table
            rowKey="id"
            columns={state.columns}
            bordered={true}
            scroll={{ x: "max-content" }}
            dataSource={state.dataSource}
            onChange={tableChangeHandler}
            row-selection={rowSelection.value}
            pagination={state.pagination}
            loading={state.loading}
          />
          <div class={styles.footer}>
            <a-button type="primary" loading={allocationing.value} onClick={() => { submit() }}>确定</a-button>
            <a-button onClick={() => { allocationRef.value.close() }} style={{ marginLeft: '20px' }}>取消</a-button>
          </div>
        </div>
      </Popup>
    )
  }
})